<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/management.css">
    <link rel="stylesheet" href="./assets/css/common.css">
</head>

<body>
    <!-- 拉动超过一定距离显示的上导航   navigation-->
    <div class="navigation" id="navigation">
        <div class="content">
            <div>
                <a href="">
                    <img src="./assets/images/payment1.png" alt="">
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./assets/images/payment2.png" alt="">
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./assets/images/payment3.png" alt="">
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./assets/images/payment4.png" alt="">
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./assets/images/top1.png" alt="">
                </a>
            </div>




        </div>
    </div>


    <!-- 头部 -->
    <header class="header">
        <div class="box">
            <div class="top">
                <div class="left">理财</div>
                <div class="right">
                    <div>
                        <div><span></span></div>
                        <div><span></span></div>
                        <div><span></span></div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="left">
                    <div>总财富</div>
                    <div>1486.00</div>
                </div>
                <div class="right">
                    <div>昨日收益</div>
                    <div>86.00</div>
                </div>
            </div>
        </div>
    </header>


    <!-- 收益  earnings-->
    <div class="earnings">
        <div class="box">
            <div>今日收益待更新</div>
            <div>查看详情</div>
        </div>
    </div>

    <!-- 基金 fund -->
    <div class="fund">
        <div class="box">
            <div class="container">
                <div class="img">
                    <img src="./assets/images/matters1.png" alt="">
                </div>
                <div class="text">定期+</div>
            </div>
            <div class="container">
                <div class="img">
                    <img src="./assets/images/matters2.png" alt="">
                </div>
                <div class="text">活期+</div>
            </div>
            <div class="container">
                <div class="img">
                    <img src="./assets/images/matters3.png" alt="">
                </div>
                <div class="text">贵金属</div>
            </div>
            <div class="container">
                <div class="img">
                    <img src="./assets/images/matters4.png" alt="">
                </div>
                <div class="text">基金</div>
            </div>
            <div class="container">
                <div class="img">
                    <img src="./assets/images/matters5.png" alt="">
                </div>
                <div class="text">借钱</div>
            </div>
        </div>
    </div>

    <!-- 涨势 rise-->
    <div class="rise">
        <div class="box">
            <div class="left">
                <div>牛马基金 指数 股票涨势好</div>
                <div>牛马基金债券 指数 股票B</div>
            </div>
            <div class="right">
            </div>
        </div>
    </div>

    <!-- 活期 current-->
    <div class="current">
        <div class="box">
            <div class="top">
                <a class="left">活期 T+0</a>
                <a class="right">查看更多</a>
            </div>
            <div class="bottom">
                <div>千库宝基金</div>
                <div>+6.27%</div>
                <div>年化利率 存款期限6个月</div>
                <div>
                    <button>开始赚钱</button>
                </div>
            </div>
        </div>

    </div>

    <!-- 热销 Hot-Selling -->
    <div class="Hot">
        <div>热销产品</div>
        <div>查看更多</div>
    </div>


    <div class="selling">
        <div class="top">
            定期 千库T+1
        </div>
        <div class="bottom">
            <div class="left">
                <div>3.186%</div>
                <div>七日年化收益率</div>
            </div>
            <div class="right">
                <div>100元起购</div>
                <div>大额理财无上限</div>
                <div>随存随取，随便花</div>
            </div>
        </div>
    </div>
    <div class="selling">
        <div class="top">
            定期 千库T+1
        </div>
        <div class="bottom">
            <div class="left">
                <div>3.186%</div>
                <div>七日年化收益率</div>
            </div>
            <div class="right">
                <div>100元起购</div>
                <div>大额理财无上限</div>
                <div>随存随取，随便花</div>
            </div>
        </div>
    </div>
    <div class="selling">
        <div class="top">
            定期 千库T+1
        </div>
        <div class="bottom">
            <div class="left">
                <div>3.186%</div>
                <div>七日年化收益率</div>
            </div>
            <div class="right">
                <div>100元起购</div>
                <div>大额理财无上限</div>
                <div>随存随取，随便花</div>
            </div>
        </div>
    </div>
    <div class="selling">
        <div class="top">
            定期 千库T+1
        </div>
        <div class="bottom">
            <div class="left">
                <div>3.186%</div>
                <div>七日年化收益率</div>
            </div>
            <div class="right">
                <div>100元起购</div>
                <div>大额理财无上限</div>
                <div>随存随取，随便花</div>
            </div>
        </div>
    </div>

<div class="bottomr">
    <input type="radio" name="ck" id="ck1" hidden>
    <label for="ck1" class="label1">
        <a class="box" href="./index.html">
            <div class="text">首页</div>
        </a>
    </label>


    <input type="radio" name="ck" id="ck2" hidden>
    <label for="ck2" class="label2">
        <a class="box" href="./management.html">
            <div class="text">理财</div>
        </a>
    </label>

    <input type="radio" name="ck" id="ck3" hidden>
    <label for="ck3" class="label3">
        <a class="box" href="./store.html">
            <div class="text">购物</div>
        </a>
    </label>

    <input type="radio" name="ck" id="ck4" hidden>
    <label for="ck4" class="label4">

        <a class="box" href="./information.html">
            <div class="text">消息</div>
        </a>

    </label>

    <input type="radio" name="ck" id="ck5" hidden>
    <label for="ck5" class="label5">
        <a class="box" href="./my.html">
            <div class="text">我的</div>
        </a>
    </label>
</div>
</body>

</html>
<script src="./assets/js/typeface.js"></script>
<script src="./assets/js/jquery.min.js"></script>
<script>

    // 给页面绑定一个滚动条事件
    $(document).scroll(function () {
        //获取到当前滚动条滚动的位置
        var distance = $(this).scrollTop()
        //当位置 > 200 就显示 返回顶部，小于200 就显示
        if (distance >= 5) {
            //显示返回顶部
            $("#navigation").css({ transform: 'scale(1)', opacity: 1 });

        } else {
            //不显示
            $("#navigation").css({ transform: 'scale(0)', opacity: 0 });
        }
    })
</script>